{% extends "base.html" %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/detail.css' %}">
{% endblock %}

{% block extra_js %}
     <script src="{% static 'js/detail.js' %}"></script>
{% endblock %}

{% block content %}
<a href="{% url 'scenic:list' %}" class="back-button">返回</a>
<div class="scenic-detail">
    <h1>{{ spot.title }}</h1>
    
    <div class="carousel-container">
        <div class="carousel">
            <img src="{{ spot.image_Homepage.url }}" alt="{{ spot.title }}">
            <img src="{{ spot.image_1.url }}" alt="{{ spot.title }}">
            <img src="{{ spot.image_2.url }}" alt="{{ spot.title }}">
        </div>
        <button class="carousel-btn left">&lt;</button>
        <button class="carousel-btn right">&gt;</button>
    </div>

    <div class="description">
        <p><strong title="地址">地址</strong> {{ spot.address }}</p>
        <p><strong>介绍:</strong>    {{ spot.description|linebreaks }}</p>
    </div>
</div>
{% endblock %}